<template>
  <div class="test-font">
    <div>num:{{ num }}</div>
    <div>double-num:{{ doubleNum }}</div>
    <div>t-num:{{ tNum }}</div>
    <button class="test-button" @click="addOne">+1</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
  setup() {
    const num = ref(0);
    const doubleNum = computed(() => {
      return num.value * 2;
    });
    const tNum = computed(() => {
      return num.value * 3;
    });
    const addOne = () => {
      num.value++;
    };
    return {
      num,
      doubleNum,
      tNum,
      addOne,
    };
  },
});
</script>
